<template>

  <div class="warp">
    <div class="codes">
        <Vqrcode content="http://120.76.142.67/ws/"></Vqrcode>
        <div class="success" :class="[ isTrue?'':'active']">
              
              <div>
                  <img src="../../../assets/svg/codesuccess.svg" alt="">
              </div>
              <div>扫码成功</div>
        </div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  onMounted,
} from "@vue/runtime-core";
import { Card, Button} from "ant-design-vue";
import Vqrcode from '../../../components/qrcode/index.vue';
import { store } from '../../../store/index'
export default defineComponent({
  name: "asd",
  components: {
    Button,
    Vqrcode,
    Card,
  },
  setup(_,{emit}) {
    // 扫码状态
    const isTrue = ref<Boolean>(false);
    // 不能使用useWebSocket
    let ws = ref<WebSocket>();
    let mins = 1*60*100;
    let newTime = new Date().getTime();
    let codes = ref();
       const onChangeStatus = () => {
            let obj = {
                name: 'asd',
                roles: [`super`],
            }
            emit('logoclick')
            store.commit('user/USER_LOGIN', obj)
        }
    onMounted(() => {
      let keys = localStorage.getItem("keys");
      if(keys){
            if(newTime>Number(keys)){
               localStorage.removeItem("keys");
               onSend();
            }else{
               codes.value=keys;
            }
      }else{
        onSend()
      }
    });
    const getServiceCode = () => {
      let str: String = localStorage.getItem("keys") ?? "0";
      if (!localStorage.getItem("keys")) {
        str = `${new Date().getTime()+mins}`;
      }
      if (window.WebSocket){
        //  获取code
        ws.value = new WebSocket("ws://120.76.142.67:9652");
        ws.value.onopen = function () {
          let obj = {
            name: "getCode",
            value: str,
          };
          ws.value?.send(JSON.stringify(obj));
        };
        ws.value.onmessage = function (e) {
          // let nTime = new Date().getTime();
          let keys = localStorage.getItem("keys") ?? false;
          let value = e.data;
          let rolus = localStorage.getItem("roles");
          if(!rolus){
            if(Number(keys)){
            // 扫码成功
                   isTrue.value=true;
                   setTimeout(()=>{
                      onChangeStatus()
                   },1000)
                } 
          }
        
          codes.value=value;
          localStorage.setItem("keys", value);
        };
        ws.value.onclose = function () {
          console.log("服务器关闭");
        };
        ws.value.onerror = function () {
          console.log("连接出错");
        };
      }
    };
    let iscode = ref();
    iscode.value = false;
    // 显示二维码进行登录
    const onSend = () => {
       getServiceCode()
    };
    const refrashCode = ()=>{
     let keys = localStorage.getItem("keys");
     let nTime = new Date().getTime();
      if(keys){
            if(nTime>Number(keys)){
             setTimeout(()=>{
              iscode.value = false;
              localStorage.removeItem("keys");
              onSend()
            },1000)
            }else{
                alert('验证码未失效')
            }
      }
      
    }
    return {
      iscode,
      refrashCode,
      onSend,
      codes,
      isTrue
    };
  },
});
</script>

<style lang="less" scoped>
.warp {
  width: 200px;
  margin: 1rem auto;
  .codes{
       width: 200px;
       height: 200px;
       position: relative;
       overflow: hidden;
       
       .success{
         &.active{
           top: 200px;
         
         }
         width: 100%;
         height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background: rgba(65, 65, 65, 0.677);
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: all .2s ease-in-out .2s;
            &>div{
               &:nth-of-type(2){
                      color: #26dda6;
                      font-size: 16px;
                      margin-top: -1.5rem;
               }
               &:nth-of-type(1){
                     width: 120px;
                     height: 120px;
                     img{
                       width: 100%;
                       height: 100%;
                     } 
               }
            }
       }
  }
}

</style>